<template>
  <div class="app-container">
    <el-form :model="question" label-width="100px">
      <!-- 题型选择 -->
      <el-row>
        <el-col :span="24">
          <h3> <span class="markRed">*</span>试题类型</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="question.type">
            <el-radio label="1">单选题</el-radio>
            <!-- <el-radio label="multipleChoice">多选题</el-radio> -->
            <!-- <el-radio label="judgment">判断题</el-radio> -->
            <!-- 其他题型... -->
          </el-radio-group>
        </el-col>
      </el-row>

      <!-- 题目内容 -->
      <el-row>
        <el-col :span="24">
          <h3><span class="markRed">*</span>试题题目</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input v-model="question.topic" placeholder="请输入试题题目，支持视频和音频"></el-input>
        </el-col>
      </el-row>

      <!-- 试题选项 -->
      <el-row>
        <el-col :span="24">
          <h3><span class="markRed">*</span>试题选项</h3>
        </el-col>
      </el-row>
      <el-row v-for="(option, index) in question.options" :key="index">
        <el-col :span="1" style="display: flex; align-items: center; justify-content: center;">
          <span>{{ option.key }}.</span>
        </el-col>
        <el-col :span="10">
          <el-input v-model="option.value" placeholder="请输入试题选项" size="mini"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click="removeOption(index)" icon="el-icon-delete" type="text"
            style="margin-left: 10px; "></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-if="question.options.length < 6">
          <el-button type=" primary" @click="addOption" size="mini" style="margin-top: 20px;">添加选项</el-button>
        </el-col>
      </el-row>

      <!-- 答案 -->
      <el-row>
        <el-col :span="24">
          <h3><span class="markRed">*</span>答案</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="question.answer" v-if="question.type === '1'">
            <el-radio v-for="(option, index) in question.options" :key="index" :label="option.key">
              {{ option.key }}
            </el-radio>
          </el-radio-group>
          <!-- 暂时就保留单选 -->
          <!-- <el-checkbox-group v-model="question.answer" v-else-if="question.type === 'multipleChoice'">
            <el-checkbox v-for="(option, index) in question.options" :key="index" :label="option.key">
              {{ option.key }}
            </el-checkbox>
          </el-checkbox-group> -->
        </el-col>
      </el-row>

      <!-- 选择章节 -->
      <el-row>
        <el-col :span="24">
          <h3>选择章节</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-select v-model="question.fk_t_sctk_chapter_id" placeholder="请选择">
            <el-option v-for="item in flatChapters" :key="item.id" :label="item.name" :value="item.id">
              <span :style="{ paddingLeft: item.level * 20 + 'px' }">{{ item.name }}</span>
            </el-option>

          </el-select>
          <el-button type="primary" @click="editChapter" size="mini" style="margin-left: 10px;">编辑章节</el-button>
          <el-switch v-model="question.chapterCheck" active-text="章节检测" style="margin-left: 10px;"></el-switch>
        </el-col>
      </el-row>

      <!-- 难易程度 -->
      <el-row>
        <el-col :span="24">
          <h3>难易程度</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-select v-model="question.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"></el-option>
            <el-option label="容易" value="2"></el-option>
            <el-option label="适中" value="3"></el-option>
            <el-option label="困难" value="4"></el-option>
            <el-option label="极难" value="5"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <!-- 提交按钮 -->
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="submitQuestion" size="mini" style="margin-top: 20px;">录入试题</el-button>
        </el-col>
      </el-row>
      <update-chapter :show-dialog.sync="updateChapterShowDialog" :title="updateChapterdialogTitle" :fk_t_sctk_id="id"
        :chapters="chapters" @chapter-updated="handleChapterUpdated"></update-chapter>
    </el-form>
  </div>


</template>

<script>
import updateChapter from '@/components/updateChapter'
import { addQuesstionBank } from '@/api/quesstionBank'
import { flattenChapters } from '@/utils'
export default {
  name: 'singleSctk',
  components: {
    updateChapter
  },
  props: {
    id: {
      type: Number,
      required: true,
    },
    chapters: {
      type: Array,
      required: true
    }
  },
  watch: {
    // 编辑章节结束后刷新选择框数据
    updateChapterShowDialog(newVal) {
      if (!newVal) {
        console.log('测试刷新');

        this.$emit('refresh-chapters');
      }
    },
  },
  computed: {
    // 将嵌套数据转换为扁平数组
    flatChapters() {
      return flattenChapters(this.chapters)
    }
  },
  data() {
    return {
      question: {
        type: '1',
        topic: '',
        options: [{ key: 'A', value: '' },
        { key: 'B', value: '' },
        { key: 'C', value: '' },
        { key: 'D', value: '' }],
        answer: '',
        fk_t_sctk_chapter_id: '',
        chapterCheck: false,
        difficulty: '3'
      },

      updateChapterShowDialog: false,
      updateChapterdialogTitle: '编辑章节',
    };
  },
  methods: {
    addOption() {
      const nextKey = this.getNextOptionKey();
      this.question.options.push({ key: nextKey, value: '' });
      // this.question.options.push({ text: '' });
    },
    //获取下一个选项key
    getNextOptionKey() {
      const existingKeys = this.question.options.map(opt => opt.key);
      for (let i = 0; i < 26; i++) {
        const key = String.fromCharCode(65 + i); // A-Z
        if (!existingKeys.includes(key)) {
          return key;
        }
      }
      return null; // 超过 Z 返回 null
    },
    removeOption(index) {
      if (!this.question.options || this.question.options.length <= 2) {
        this.$message.warning('至少需要两个选项');
        return;
      }

      this.question.options.splice(index, 1);
      // 重新生成选项字母
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      let newOptions = [];

      for (let i = 0; i < this.question.options.length; i++) {
        let option = this.question.options[i];
        let newLabel = alphabet[i];
        newOptions.push({ key: newLabel, value: option.value });
      }

      // 更新 question.options
      this.question.options = newOptions;
    },
    editChapter() {
      // 编辑章节逻辑
      this.updateChapterShowDialog = true
      this.updateChapterdialogTitle = '编辑章节'

    },
    async submitQuestion() {
      // 提交试题逻辑
      // 1️⃣ 表单校验
      if (!this.question.topic.trim()) {
        this.$message.warning('试题题目不能为空');
        return;
      }

      if (!this.question.options || this.question.options.length < 2) {
        this.$message.warning('至少需要两个选项');
        return;
      }

      if (!this.question.answer) {
        this.$message.warning('请选择答案');
        return;
      }

      if (this.question.chapterCheck && !this.question.fk_t_sctk_chapter_id) {

        this.$message.warning('请选择章节');
        return
      }
      this.chapterCheck = this.question.chapterCheck ? 1 : 0;
      await addQuesstionBank({ ...this.question, 'fk_t_sctk_id': this.id })
      // 重置表单
      this.question = {
        type: '1',
        topic: '',
        options: [{ key: 'A', value: '' },
        { key: 'B', value: '' },
        { key: 'C', value: '' },
        { key: 'D', value: '' }],
        answer: '',
        fk_t_sctk_chapter_id: '',
        chapterCheck: false,
        difficulty: '3'
      }
    },
    handleChapterUpdated() {
      // 收到孙组件通知后，告诉父组件刷新数据
      this.$emit('refresh-chapters');
    }

  }
};
</script>

<style scoped>
.app-container {
  background: #fff;
  display: flex;
  border-radius: 5px;
  flex-direction: column
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.quill-editor {
  height: 150px;
}

.el-button--circle {
  padding: 8px;
}

h3 {
  font-size: 16px;
  /* 设置与普通文本相同的字体大小 */
  font-weight: normal;
  /* 不加粗 */
  margin: 20px 0;
  /* 调整上下间距 */
}

.markRed {
  font-size: 14px;
  color: red;
  text-align: center;
  margin-right: 5px;
}
</style>